import React, { Component } from 'react'
import './index.css'
export default class Footer extends Component {
    render() {
        //获取全部任务数量
        let total = this.props.todos.length;
        let comTotal = this.props.todos.filter(item=>item.done).length;
        return (
            <div className="todo-footer">
                  <label>
                    <input  checked = {this.props.todos.every(item=>item.done)}type="checkbox"onChange={this.checkTodoAll} />
                   </label>
                    <span>
                     <span>已完成{comTotal}</span> / 全部{total}
                     </span>
                     <button  onClick ={this.clean} className="btn btn-danger">清除已完成任务</button>
               </div>
        )
    }
    checkTodoAll= (e)=>{
        //获取当前checkbox的状态
        //console.log(e.target.checked);
        this.props.checkTodoAll(e.target.checked);
    }
    clean = ()=>{
        this.props.clean();
    }
}
